<template>
  <div ref="chartDom" style="width: 600px; height: 400px;"/>
</template>

<script setup>
import {nextTick, onMounted, onUnmounted, ref} from 'vue';
import * as echarts from 'echarts';

const chartDom = ref(null);
let chartInstance = null;
onMounted(async () => {
  await nextTick();
  chartInstance = echarts.init(chartDom.value);
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        return `${params.name}<br/>人数: ${params.value[2]}<br/>占比: ${params.value[1]}%`;
      }
    },
    xAxis: {
      type: 'category',
      data: ['50万以下', '50-60万', '60-70万', '70-80万', '80-90万', '90-100万'],
      boundaryGap: true
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value} %'
      }
    },
    series: [{
      name: '人群分布',
      type: 'scatter',
      symbolSize: function (data) {
        return Math.sqrt(data[2]) * 10; // Adjust the size scaling factor as needed
      },
      data: [
        [0, 5, 50],   // [xAxis index, yAxis value, bubble size]
        [1, 10, 160],
        [2, 15, 240],
        [3, 20, 360],
        [4, 25, 480],
        [5, 10, 300]
      ],
      emphasis: {
        focus: 'series',
        itemStyle: {
          color: '#4a90e2'
        }
      }
    }]
  };
  chartInstance.setOption(option);
});

onUnmounted(() => {
  if (chartInstance != null && chartInstance.dispose) {
    chartInstance.dispose();
  }
});
</script>

<style scoped>

</style>